<template>
  <div class="home">
    <el-container>
      <!-- 头部 -->
      <el-header>
        <img
          src="https://img2.baidu.com/it/u=2382567634,1006370053&fm=26&fmt=auto&gp=0.jpg"
          alt=""
        />
        <span>宏烨找房后台管理系统</span>
        <el-button type="info" @click.native="goOut">退出</el-button>
      </el-header>
      <!-- 主体内容 -->
      <el-container>
        <!-- 侧边栏 -->
        <el-aside :width="isCollapse ? '64px' : '200px'">
          <div class="taggle-button" @click="taggleButton">|||</div>
          <el-menu
            unique-opened
            :collapse="isCollapse"
            :collapse-transition="false"
            active-text-color="#333744"
            router
          >
            <!-- <el-menu-item :index="v.path" v-for="(v, i) in routerList" :key="i">
              <i :class="v.icon"></i>
              <span slot="title">{{ v.title }}</span>
            </el-menu-item> -->
            <router-link to="/home/Property">
              <i class="iconfont icon-shouye"></i>
              房源管理
            </router-link>
            <router-link to="/home/LiveBroadcast">
              <i class="iconfont icon-crm17"></i>
              直播管理
            </router-link>
            <router-link to="/home/GroupBuy">
              <i class="iconfont icon-bianji"></i>
              团购管理
            </router-link>
            <router-link to="/home/Audit">
              <i class="iconfont icon-fenxiang"></i>
              审核管理
            </router-link>
            <router-link to="/home/Order">
              <i class="iconfont icon-wenjian"></i>
              订单管理
            </router-link>
            <router-link to="/home/News">
              <i class="iconfont icon-zixun"></i>
              资讯管理
            </router-link>
            <router-link to="/home/Broker">
              <i class="iconfont icon-wode"></i>
              经纪人管理
            </router-link>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// import routes from '.././utils/filterRouter'
export default {
  data() {
    return {
      routerList: [],
      activePath: "",
      meunList: null,
      isCollapse: false,
    }
  },
  created() {
    // this.routerList = routes()
    this.$api.getList().then((res) => {
      // console.log(res, "page");
      this.meunList = res.data.data;
    })
  },
  methods: {
    /// 开启伸缩动画
    taggleButton() {
      this.isCollapse = !this.isCollapse;
    },
    /// 退出登录
    goOut(){
       window.localStorage.clear()
       this.$router.push('/login')
    }
  }
}
</script>

<style lang='scss'>
.home {
  width: 100%;
  height: 100%;
}
.el-main {
  height: 100%;
}
.el-container {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.taggle-button {
  height: 35px;
  color: #fff;
  line-height: 35px;
  border-bottom: 1px solid #eee;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  img {
    width: 65px;
    height: 100%;
  }
}
.el-aside {
  height: 100%;
  background-color: rgb(65, 53, 53);
  color: #000;
  text-align: center;
  .el-menu {
    background-color: rgba(0, 0, 0, 0.5);
    a {
      display: block;
      text-align: center;
      height: 50px;
      line-height: 50px;
      color: #fff;
    }
  }
  .router-link-active {
    background-color: #fffbfbad;
  }
}
</style>